﻿<!DOCTYPE html>
<html lang="en">
@{ 
    var VModel = (CofeWebApplication.Models.LayoutViewModel)ViewBag.BasketItems;

}
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <title>@ViewData["Title"] - C#ffee</title>


    <link rel="stylesheet" href="/Content/common-elements/site.css" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/Content/common-elements/bootstrap.min.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/Content/common-elements/responsive.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/Content/common-elements/custom.css">
</head>

<body>
    <div class="main-top">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="text-slid-box">
                        <div id="offer-box" class="carouselTicker">
                            <ul class="offer-box">
                                <li>
                                    <img src="/Content/Image/icon.png" style="width: 16px; height:16px">  10% Off on Select Courses!
                                </li>
                                <li>
                                    <img src="/Content/Image/icon.png" style="width: 16px; height:16px"> NEW YEAR SALE - UP to 30% OFF!
                                </li>
                                <li>
                                    <img src="/Content/Image/icon.png" style="width: 16px; height:16px"> Free Shipping For New Customers
                                </li>
                                <li>
                                    <img src="/Content/Image/icon.png" style="width: 16px; height:16px"> New Loyalty Scheme for Returning Customers
                                </li>
                                <li>
                                    <img src="/Content/Image/icon.png" style="width: 16px; height:16px"> New Subscription Service - Live Now!
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="custom-select-box">
                        <select id="basic" class="selectpicker show-tick form-control" data-placeholder="£ GBP">
                            <option>£ GBP</option>
                            <option>$ USD</option>
                            <option>€ EUR</option>
                        </select>
                    </div>
                    <div class="our-link">
                        <ul>
                            <li>@Html.ActionLink("My Account", "Index", "Manage")</li>
                            <li>@Html.ActionLink("Contact Us", "Contact", "Home")</li>
                            <li>@Html.Partial("_LoginPartial")</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Start Main Top -->
    <header class="main-header">
        <!-- Start Navigation -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default bootsnav">
            <div class="container">
                <!-- Start Header Navigation -->
                <div class="navbar-header">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fa fa-bars"></i>
                    </button>

                </div>
                <div class="collapse navbar-collapse" id="navbar-menu">

                    <ul class="nav navbar-nav ml-auto" data-in="fadeInDown" data-out="fadeOutUp">
                        <li class="nav-item">@Html.ActionLink("Coffee", "Index", "Coffees", null, new Dictionary<string, object> { { "class", "nav-link" } })</li>
                        <li class="nav-item">@Html.ActionLink("Courses", "Index", "Courses", null, new Dictionary<string, object> { { "class", "nav-link" } })</li>
                        <li>@Html.ActionLink("Guides", "Index", "Guides", null, new Dictionary<string, object> { { "class", "nav-link" } })</li>
                    </ul>

                    <a class="navbar-brand" href="@Url.Action("Index", "Home")" style="margin-left:60px"><img src="/Content/Image/logo2dark256.png" class="logo" alt=""></a>

                    <ul class="nav navbar-nav ml-auto" data-in="fadeInDown" data-out="fadeOutUp">
                        <li>@Html.ActionLink("About", "Index", "About", null, new Dictionary<string, object> { { "class", "nav-link" } })</li>
                        <li class="nav-item">@Html.ActionLink("Blog", "Index", "Blog", null, new Dictionary<string, object> { { "class", "nav-link" } })</li>
                        <li class="nav-item">@Html.ActionLink("Ethics", "Index", "Ethics", null, new Dictionary<string, object> { { "class", "nav-link" } })</li>
                    </ul>

                </div>

                <!-- Start Atribute Navigation -->
                <div class="attr-nav">
                    <ul>
                        <li class="search"><a href=""><i class="fa fa-search"></i></a></li>
                        <li class="side-menu">
                            <a href="#">
                                <i class="fa fa-shopping-bag"></i>
                            
                            <span class="badge"></span> @*needs to link to customer basket item count*@
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- End Atribute Navigation -->
            </div>
            <!-- Start Side Menu -->
            <div class="side">
                <a href="#" class="close-side"><i class="fa fa-times"></i></a>
                @Html.Partial("_TopMenuVModel", VModel)
            </div>
            <!-- End Side Menu -->
        </nav>
    </header>

    <main role="main" class="pb-3">
        <div class="top-search">
            <div class="container">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    @using (Html.BeginForm("Index", "Coffees", FormMethod.Get))
                    {
                        @Html.TextBox("searchName", null, new Dictionary<string, object> { { "class", "form-control" } }) <input type="submit" class="form-control" value="Filter">
                    }
                    <span class="input-group-addon close-search"><i class="fa fa-times"></i></span>
                </div>
            </div>
        </div>
        @RenderBody()
    </main>

    <div style="padding-top: 600px; border-top:200px">
    <footer class="border-top footer text-muted">
        <div class="footer-main">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <div class="footer-widget" style=" height: 100%">
                                <h4>Social Media</h4>
                                <ul>
                                    <li><a href="#"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fab fa-google-plus" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fa fa-rss" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
                                    <li><a href="#"><i class="fab fa-whatsapp" aria-hidden="true"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-12 col-sm-12">
                            <div class="footer-link">
                                <h4>Information</h4>
                                <ul>
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">Customer Service</a></li>
                                    <li><a href="#">Our Sitemap</a></li>
                                    <li><a href="#">Terms &amp; Conditions</a></li>
                                    <li><a href="#">Privacy Policy</a></li>
                                    <li><a href="#">Delivery Information</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-12 col-sm-12">
                            <div class="footer-link-contact">
                                <h4>Contact Us</h4>
                                <ul>
                                    <li>
                                        <p><i class="fas fa-map-marker-alt"></i>Address: No1 Whitehall Riverside, 1 Riverside Way, Leeds,<br> LS1 4BN </p>
                                    </li>
                                    <li>
                                        <p><i class="fas fa-phone-square"></i>Phone: <a href="tel:+1-888705770">+44 7849 871 309</a></p>
                                    </li>
                                    <li>
                                        <p><i class="fas fa-envelope"></i>Email: <a href="mailto:holly.sadler@thisisfake.com">holly.sadler@thisisfake.com</a></p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </footer>
</div>
    <!-- ALL JS FILES -->
    <script src="/Scripts/jquery-3.2.1.min.js"></script>
    <script src="/Scripts/popper.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <!-- ALL PLUGINS -->
    <script src="/Scripts/jquery.superslides.min.js"></script>
    <script src="/Scripts/bootstrap-select.js"></script>
    <script src="/Scripts/inewsticker.js"></script>
    <script src="/Scripts/bootsnav.js"></script>
    <script src="/Scripts/images-loded.min.js"></script>
    <script src="/Scripts/isotope.min.js"></script>
    <script src="/Scripts/owl.carousel.min.js"></script>
    <script src="/Scripts/baguetteBox.min.js"></script>
    <script src="/Scripts/form-validator.min.js"></script>
    <script src="/Scripts/contact-form-script.js"></script>
    <script src="/Scripts/custom.js"></script>
    <script src="/Scripts/bootstrap.bundle.min.js"></script>
    <script src="/Scripts/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>
